<template>
	<div v-if='device'>
		<div class='overflow'>
			<div class='info-card' style='width:49%'>
				<div class='card-name color-333333 f-16'>基本信息</div>
				<div class='content'>
					<div class='absolute xy overflow' style='width:90%;'>
						<div class='pull-left' style='width:50%'>
							<div class='ttc'><span class='t'>设备号</span><span class='c'>{{device.device_no}}</span></div>
							<div class='ttc'><span class='t'>SIM ICCID</span><span class='c'>{{device.sim_iccid}}</span></div>
							<div class='ttc'><span class='t'>所属代理</span><span class='c'>{{device.agent_name}}</span></div>
							<div class='ttc'><span class='t'>所属门店</span><span class='c'>{{device.store_name}}</span></div>
							<div class='ttc'><span class='t'>设备名称</span><span class='c'>{{device.device_name}}</span></div>
							<div class='ttc'><span class='t'>在线状态</span><span class='c'></span></div>
							<div class='ttc'><span class='t'>设备类型</span><span class='c'></span></div>
							<div class='ttc'><span class='t'>端口数量</span><span class='c'>{{device.port_number}}</span></div>
						</div>
						<div class='pull-left' style='width:50%'>
							<div class='ttc'><span class='t'>投币报警数</span><span class='c'>{{device.coin_limit}}</span></div>
							<!-- <div class='ttc'>
								<span class='t'>扫码套餐</span>
								<span class='c'>
									<el-popover
										trigger='hover'>
										<div style="line-height:24px;font-size:12px;padding:5px 0px">
											<div>预设选择:</div>
											<div style='overflow:hidden;width:130px;'>
												<div v-if='device.priceOption' v-for='item in device.priceOption' style='float:left;padding:0px 5px;'>{{item.a}}元{{item.q}}小时</div>
											</div>
										</div>
										<span slot='reference' class='color-primary'>{{device.priceName}}</span>
									</el-popover>
								</span>
							</div> -->
							<div class='ttc'><span class='t'>网关</span><span class='c'>{{device.gatewayName}}</span></div>
							<div class='ttc'><span class='t'>通讯方式</span><span class='c'></span></div>
							<div class='ttc'><span class='t'>流量费</span><span class='c'>{{device.sim_fee}}</span></div>
							<div class='ttc'><span class='t'>下次缴费时间</span><span class='c'>{{device.sim_expire | parseTime}}</span></div>
							<div class='ttc'><span class='t'>坐标</span><span class='c'>{{device.longitude + ' ' + device.latitude}}</span></div>
							<div class='ttc'><span class='t'>详细地址</span><span class='c'>{{(device.province || '') + (device.city || '') + (device.district || '') + (device.address || '')}}</span></div>
							<div class='ttc'><span class='t'>添加时间</span><span class='c'>{{device.create_time | parseTime}}</span></div>
							<div class='ttc'><span class='t'>备注</span><span class='c'>{{device.remarks}}</span></div>
						</div>
					</div>
				</div>
			</div>
			<div class='info-card' style='width:24%;margin-left:1%;'>
				<div class='card-name color-333333 f-16 relative'>
					<span>基本信息</span>
					<el-button class='absolute' style='right:10px;top:0;' size='mini' type="primary">刷新</el-button>
				</div>
				<div class='content'>
					<div class='absolute xy overflow'>
						<div class='ttc'><span class='t'>信号强度值</span><span class='c'>dBm</span></div>
						<div class='ttc'><span class='t'>信道误码率</span><span class='c'>362323</span></div>
						<div class='ttc'><span class='t'>信号图标</span><span class='c'>12356</span></div>
						<div class='ttc'><span class='t'>5格</span><span class='c'>大于-85dBm</span></div>
						<div class='ttc'><span class='t'>4格</span><span class='c'>-85dBm至-90dBm</span></div>
						<div class='ttc'><span class='t'>3格</span><span class='c'>-90dBm至-95dBm</span></div>
						<div class='ttc'><span class='t'>2格</span><span class='c'>-95dBm至-100dBm</span></div>
						<div class='ttc'><span class='t'>1格</span><span class='c'>-100dBm至-105dBm</span></div>
						<div class='ttc'><span class='t'>0格</span><span class='c'>小于-105dBm</span></div>
					</div>
				</div>
			</div>
			<div class='info-card' style='width:24%;margin-left:1%;'>
				<div class='card-name color-333333 f-16 relative'>
					<span>基本信息</span>
					<el-button class='absolute' style='right:10px;top:0;' size='mini' type="primary">刷新</el-button>
				</div>
				<div class='content'>
					<div class='absolute xy overflow'>
						<div style='width:164px;'>
							<img :src='device.qrUrl'/>
						</div>
						<div class='m-t-15 text-center'>
							<a :href='device.qrUrl' :download='deviceNo + ".png"' :target='"_blank"' class='color-primary f-12' target='_blank'>下载</a>
						</div>
						<div class='m-t-15 text-center'>
							<el-button @click='downAllPort' size='mini' type='text'>下载全部二维码</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='m-t-30'>
			<div class='card-name color-333333 f-16 relative'>设备端口</div>
			<div class='content-box m-t-20'>
				<el-table :data='device.port' style='width:100%;'>
					<el-table-column label='端口号'>
						<template slot-scope='scope'>{{ scope.row.port_no }}</template>
					</el-table-column>
					<el-table-column label='状态'>
						<template slot-scope='scope'>{{ portStatus[scope.row.status] }}</template>
					</el-table-column>
					<el-table-column label='二维码'>
						<template slot-scope='scope'>
							<img style='width:50px;' :src='scope.row.qr'/>
						</template>
					</el-table-column>
					<el-table-column label='操作'>
						<template slot-scope='scope'>
							<router-link to='' target='_blank'>
								<a :href='scope.row.qr' :download='deviceNo + "#" + scope.row.port + ".png"' :target='"_blank"' class='color-primary f-12' target='_blank'>下载</a>
							</router-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script src='./device.js'></script>

<style lang='less' scoped="scoped" src='./device.less'></style>

<style lang='less'>
	.tooltip{
		position:absolute;
		width:185px;
		background:rgba(0, 0, 0, 0.75);
		color:#fff;
		padding:15px 0px 15px 15px;
		
		.name {
			font-size:16px;
		}
		
		.item{
			padding-left:20px;
			position:relative;
			line-height:22px;
			font-size:12px;
			margin-top:5px;
			
			&:before{
				content:'';
				position:absolute;
				width:10px;
				height:10px;
				border-radius:50%;
				left:0;
				top:50%;
				transform:translateY(-50%);
				background:'red';
			}
		}
		
	}
</style>